<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导师介绍</title>
    
    <!-- 2-1.导入css -->
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
    <style type="text/css">
    th{display: none;}
    tbody tr ,tbody tr td{display:block;width:337px!important;float: left;overflow: hidden;padding:0px;}
    tbody tr td div{display:block;width:310px!important;float: left;overflow: hidden;padding:0px;}
    .layui-table-grid-down{display: none;}
    .layui-table-header{display: none;}
    .layui-table-cell{
    	display:block;
    	height:300px;
    	white-space:normal!important;
					}
	.layui-table img{max-width: 200px;}
    </style>
</head>
<body>
<div id="headerpage" style="width:100%;height:154px;">
	<!--这个div是为了引入header.html头部-->
    </div> 
    
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="showInfo">
		<div style="float: left;position: absolute;">
			<p><img src="/file/image/tutor/{{d.tutimage}}" style="width:200px;height:170px;"/></p>
			<p><span>姓名：{{d.tutname}}</span></p>
			<div style="width:306px!important;height:auto!important;word-wrap: break-word;word-break: break-all;overflow: hidden;text-align:left;">简介：{{d.tutprofile}}</div>
 		</div>
    </script>
    
    <iframe id="footerWrap"  width="100%" height="80px"  scrolling="no" frameborder="0"  src="/footer" noresize="noresize" /></iframe>
</body>

<!-- 2-2.导入js -->

<script src="../layuiadmin/layui/layui.js"></script>  
<script>
  
  layui.config({
    base: '../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form','table', 'laydate'], function(){
    var table = layui.table
    ,form = layui.form
    ,$ = layui.$
    ,admin = layui.admin;
    $("#headerpage").load("/header");
    table.render({
		id:'tutid',
	    elem: '#test'
	    ,url:'/tutor/queryTutor'
	    ,page:{limit:12}
    	,cols: [[
    		{field:'', title: '', align:'center', templet: '#showInfo', unresize: true}
  	    ]]
	//My笔记： unresize: true，表示这一列不允许再用鼠标自定义它的宽度，不设置默认是可以的，即 unresize: false
	//     sort: true,表示会在这一列的表头上加上一个排序的箭头，加上这句就是支持基于这一列进行关于行数据的排序
	//     templet: '#usernameTpl'，表示这一行的效果关联一个id名为usernameTpl的script块，在这里可以定义一些花里胡哨的显示，如表单显示
	  });
    /* $.ajax({
	      url: '/message/getMessageNum',
	      type: 'POST',
	  	  dataType:'text',
	      success: function (data) {
   		 var jsonData=eval("("+data+")");
           
	         if(jsonData.status!=0){
	        	 document.getElementById("message").innerHTML='<i class="layui-icon layui-icon-notice"></i>'+'<span class="layui-badge-dot" style="margin-left:-5px;"></span>';
	         }
	       }
}) 
*/
  });
  </script>
</html>
